<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 要求：1.点击任意按钮，可以实现访问，且点击一个，点击第二个的时候第一个自动取消 -->
<!-- 思路：1.第一次循环先得让所有元素都实现可以点击 -->
<!-- 排他思想：先干掉别人，再留下自己修改样式 -->
<!-- 2.第二次循环实现所有元素在点击后颜色都消失 -->
<!-- 3.第三次循环实现所有元素颜色在点击之后都变为红色 -->

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //1.获取事件
        var btn = document.getElementsByTagName('button');
        //2.注册事件
        //由于有多个元素，想要某个元素实现某一种样式，则需要用到for循环
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                //先清除所有元素的样式（干掉其他人）
                for (var i = 0; i < btn.length; i++) {
                    btn[i].style.backgroundColor = '';
                }
                //再修改自己的样式
                this.style.backgroundColor = 'pink';
                // btn[i].style.backgroundColor = 'pink'; 为什么不能使用btn[i],只能用this
            }
        }
    </script>
</body>

</html>